<template>
  <div class="add-ti">
    <div class="child-question-box">
       <span class="child-num" v-if="childType == 1">{{num}}.&nbsp;&nbsp;单选题</span>
       <span class="child-num" v-if="childType == 2">{{num}}.&nbsp;&nbsp;多选题</span>
       <div class="child-input">
            <ckeditor id="ck" v-model="childData.content" :height="'90px'" :placeholder="'请输入题干'"></ckeditor>
       </div>
    </div>
    <addUploads :quesFileList="childData.quesFileList"></addUploads>
    <div v-if="childType == 1">
      <a-radio-group v-model="childData.answer" style="width: calc(100% - 8px);margin-left: 8px;">
        <a-radio class="options-box" :value="index" v-for="(item,index) in childData.options" :key="index">{{Alphabet[index]}}、
          <div class="options-label">
            <ckeditor id="ck" v-model="item.content" :height="'40px'" :placeholder="'请输入内容'"></ckeditor>
          </div>
          <div class="options-controls">
            <i class="Ti-icon options-icon icon-delete" @click.prevent="setOptions(index,'delete')"></i>
            <i v-if="index > 0" class="options-icon" @click.prevent="setOptions(index,'up')"><a-icon type="arrow-up" />上移</i>
            <i v-if="index < childData.options.length-1" class="options-icon" @click.prevent="setOptions(index,'down')"><a-icon type="arrow-down" />下移</i>
            <i class="Ti-icon options-icon icon-plus-circle" @click.prevent="setOptions(index,'circle')">&nbsp;添加选项</i>
          </div>
        </a-radio>
      </a-radio-group>
      <div style="line-height: 37px;margin-bottom: 10px;">
        <span>参考答案：{{Alphabet[childData.answer]}}</span>
      </div>
    </div>
    <div v-if="childType == 2">

      <a-checkbox-group v-model="childData.answer" @change="onCheck" style="width: calc(100% - 8px);margin-left: 8px;">
        <a-checkbox class="options-box" :value="index" v-for="(item,index) in childData.options" :key="index">
          {{Alphabet[index]}}、
          <div class="options-label">
            <ckeditor id="ck" v-model="item.content" :height="'40px'" :placeholder="'请输入内容'"></ckeditor>
          </div>
          <div class="options-controls">
            <i class="Ti-icon options-icon icon-delete" @click.prevent="setOptions(index,'delete')"></i>
            <i v-if="index > 0" class="options-icon" @click.prevent="setOptions(index,'up')"><a-icon type="arrow-up" />上移</i>
            <i v-if="index < childData.options.length-1" class="options-icon" @click.prevent="setOptions(index,'down')"><a-icon type="arrow-down" />下移</i>
            <i class="Ti-icon options-icon icon-plus-circle" @click.prevent="setOptions(index,'circle')">&nbsp;添加选项</i>
          </div>
        </a-checkbox>
      </a-checkbox-group>
      <div style="line-height: 37px;margin-bottom: 10px;">
        参考答案：<span v-for="(item,index) in childData.answer" :key="index">{{Alphabet[item]}} <label v-if="index < childData.answer.length-1">、</label></span>
      </div>
    </div>
    <!-- <div>
      <span style="line-height: 37px;">答案解析：</span>
      <div style="display: inline-block;width: calc(100% - 100px);vertical-align: top;">
        <ckeditor id="ck" v-model="childData.analysis" :height="'180px'" :placeholder="'请输入解析'"></ckeditor>
      </div>
    </div> -->
  </div>
</template>

<script>
import addUploads from '@/components/addTi/addUpload/index.vue';
export default {
  data() {
    return {
      content: '',
      Alphabet: [
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z'
      ],
      radioStyle: {display: 'block'},
    };
  },
  components: {
    addUploads
  },
  props: {
    childData: {
      type: Object,
      default: () =>{}
    },
    childType: {
      type: Number,
      default: 0
    },
    num: {
        type: Number,
        default: 0
    }
  },
  methods: {
    onCheck() {
      this.childData.answer && this.childData.answer.sort((a,b)=>a-b)
    },
    setOptions(index,type) {
      if (type == 'delete') { //删除
        if (this.childType == 1) {
          if (this.childData.options.length > 2) {
            this.childData.options.splice(index,1);
            if(this.childData.answer === index){ //答案包括删除下标的项
                this.childData.answer = null
            }else if(this.childData.answer > index){ //答案不包括删除下标的项
                this.childData.answer -= 1
            }
          } else {
            this.$message.warning('单选题至少2个选项');
          }
        } else if(this.childType == 2){
          if (this.childData.options.length > 3) {

            this.childData.options.splice(index,1);

          if(this.childData.answer.includes(index)){  //答案包括删除下标的项

              if(index === 0){  //删除首项

                this.childData.answer.splice(0,1)
                this.childData.answer.forEach((item,i,arr)=>{arr[i] = arr[i] - 1})

              }else if(index === this.childData.options.length){ //删除末项

                this.childData.answer.splice(this.childData.answer.length-1,1)

              }else{ //删除中间项
                let num = this.childData.answer.indexOf(index)
                this.childData.answer.splice(num,1)
                this.childData.answer.forEach((item,i,arr)=>{
                  if(i>=num){
                    arr[i] = arr[i] - 1
                  }
                })
              }

            }else{ //答案不包括删除下标的项
              if(index === 0){ //首项
                this.childData.answer.forEach((item,i,arr)=>{arr[i] = arr[i] - 1})
              }else if(index === this.childData.options.length){ //末项
                //不用删除答案
              }else{ //中间项
                this.childData.answer.forEach((item,i,arr)=>{
                  if(item>index){
                    arr[i] = arr[i] - 1
                  }
                })
              }
            }

          } else {
            this.$message.warning('多选题至少3个选项');
          }
        }
        
      } else if(type == 'up') { //上移
        let tempOption = this.childData.options[index - 1]
        this.$set(this.childData.options, index - 1, this.childData.options[index])
        this.$set(this.childData.options, index, tempOption)
      } else if(type == 'down') { //下移
        let tempOption = this.childData.options[index + 1]
        this.$set(this.childData.options, index + 1, this.childData.options[index])
        this.$set(this.childData.options, index, tempOption)
      } else if(type == 'circle') { //添加
        let add = {content: ''};
        if (this.childData.options.length < 26) {
          this.childData.options.splice(index+1,0,add);
        } else {
          this.$message.warning('至多26个选项');
        }
        
      }
    }
  }
};
</script>

<style>
</style>